<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				position: relative;
			}
			div{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				left: 50%;
			}
			#one{
				position: absolute;
				top: 100px;
				margin-left: -101px;
				transition: margin-left 0.5s;
			}
			#two{
				position: absolute;
				top: 200px;
				margin-left: -101px;
				transition: margin-left 0.7s;
			}
			#three{
				position: absolute;
				top: 300px;
				margin-left: -101px;
				transition: margin-left 0.9s;
			}
			#four{
				position: absolute;
				top: 400px;
				margin-left: -101px;
				transition: margin-left 1.1s;
			}
			
			
		</style>
	</head>
	<body>
		<div id="btn"></div>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div id="four"></div>
		
		<script type="text/javascript">
			var btn=document.getElementById("btn");
			var one=document.getElementById("one");
			var two=document.getElementById("two");
			var three=document.getElementById("three");
			var four=document.getElementById("four");
			
			btn.onmousedown=function(){
				one.style.marginLeft="100px";
				two.style.marginLeft="200px";
				three.style.marginLeft="300px";
				four.style.marginLeft="400px";
			};
			btn.onmouseup=function(){
				one.style.marginLeft="-101px";
				two.style.marginLeft="-101px";
				three.style.marginLeft="-101px";
				four.style.marginLeft="-101px";
			}
		</script>
    		
	</body>
</html>
